.search-container {
  color: #000;
  min-height: 100vh;
  background-color: #fff;

  .search-con {
    padding: 10rpx 20rpx 10rpx;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90rpx;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 9;

    .search {
      padding: 0 10rpx;
      display: flex;
      align-items: center;
      height: 70rpx;
      background-color: #f6f7f9;
      border-radius: 70rpx;

      .search-img {
        margin-right: 20rpx;
        width: 50rpx;
        height: 50rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      input {
        flex: 1;
        font-size: 26rpx;
        color: #818894;
      }
    }
  }

  // .search-bar {
  //   position: fixed;
  //   top: 0;
  //   left: 0;
  //   padding: 12rpx 20rpx;
  //   display: flex;
  //   align-items: center;
  //   width: 100%;
  //   background-color: #f1f1f1;
  //   box-sizing: border-box;

  //   .search-input {
  //     margin-right: 20rpx;
  //     flex: 1;
  //     height: 60rpx;
  //     background-color: #fff;
  //     border-radius: 10rpx;
  //     overflow: hidden;

  //     input {
  //       padding: 0 20rpx;
  //       width: 100%;
  //       height: 100%;
  //       font-size: 26rpx;
  //       box-sizing: border-box;
  //     }
  //   }

  //   .search-btn {
  //     font-size: 28rpx;
  //   }
  // }

  .search-list {
    padding: 100rpx 20rpx calc(env(safe-area-inset-bottom));

    .search-item {
      padding: 20rpx;
      // margin-bottom: 20rpx;
      border-bottom: 2rpx solid #f1f1f1;

      &:last-child {
        border-bottom: none;
      }

      .songname {
        margin-bottom: 5rpx;
        font-size: 30rpx;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .singername {
        color: #818894;
        font-size: 24rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

    }
  }
}